<template>
    <div class="vertical-layout">
        <div ref="titleBar">
            <van-nav-bar :title="state.title" fixed placeholder active-color="#ee0a24" @click-left=openDrawer>
                <template #left>
                    <van-icon name="wap-nav" color="white" size="18" />
                </template>
                <template #right>
                    <van-icon name="search" color="white" size="18" />
                </template>
            </van-nav-bar>
        </div>
        <div class="main-content" id="main_content">
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
                </keep-alive>
                <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
            </router-view>
        </div>
        <van-tabbar route v-model="activeIndex" @change="onTabChange" placeholder fixed active-color="#ff6900">
            <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item replace to="/system" icon="search">体系</van-tabbar-item>
            <van-tabbar-item replace to="/wechat" icon="friends-o">公众号</van-tabbar-item>
            <van-tabbar-item replace to="/project" icon="friends-o">项目</van-tabbar-item>
            <van-tabbar-item replace to="/site" icon="setting-o">导航</van-tabbar-item>
        </van-tabbar>
        <van-popup get-container="#app" v-model:show="showPop" position="left"
            :style="{ width: '70%', height: '100%', background: '#DFDFDF' }">
            <div class="drawer-wrap">
                <div class="top-wrap" @click="doLogin">
                    <img class="avator-style" src="../assets/images/avator.jpg" />
                    <div class="user-name">{{ !userStore.hasLogin ? '登录/注册' : userStore.userInfo.username }}</div>
                </div>
                <van-cell-group>
                    <van-cell value="我的收藏" icon="like-o" is-link
                        @click="$router.push({ path: '/collect' }); closeDrawer()" />
                    <van-cell value="TODO" icon="add-o" is-link />
                    <van-cell value="退出登录" icon="share" />
                </van-cell-group>
            </div>
        </van-popup>
    </div>
</template>

<script setup lang="js">
import { onActivated, onMounted, provide, reactive, ref, watch } from 'vue'
import { showToast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

defineOptions({
    name: "layout"
})

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const state = reactive({
    title: '首页',
})
const activeIndex = ref(0)
const showPop = ref(false)
const titleBar = ref(null)
const toolBarHeight = ref(0)

onMounted(() => {
    // 注入组件高度
    setTimeout(() => {
        toolBarHeight.value = titleBar.value.clientHeight
    })
})

provide('toolBarHeight', toolBarHeight)

onActivated(() => {

})

const onTabChange = (index) => {
    switch (index) {
        case 0://首页
            state.title = '首页'
            break
        case 1://体系
            state.title = '体系'
            break
        case 2://公众号
            state.title = '公众号'
            break
        case 3://项目
            state.title = '项目'
            break
        case 4://导航
            state.title = '导航'
            break
    }
}

const openDrawer = () => {
    showPop.value = true
}

const closeDrawer = () => {
    showPop.value = false
}

const doLogin = () => {
    if (!userStore.getLoginState) {
        router.push({
            path: '/login'
        })
        closeDrawer()
    } else {
        showToast('您已经登录了')
    }
}
</script>

<style scoped lang="scss">
.main-content {
    flex: auto;
}

.drawer-wrap {
    display: flex;
    width: 100%;
    flex-direction: column;

    .top-wrap {
        height: 200px;
        background-image: url("../assets/images/drawer-back.jpg");
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .avator-style {
            height: 60px;
            width: 60px;
            border-radius: 30px;
        }

        .user-name {
            margin-top: 15px;
            margin-top: 15px;
            font-size: 18px;
            color: white;
        }
    }
}
</style>